<template>
  <div class="login-container">
    <div class="login-box">
      <!--第一行标题栏-->
      <div class="login-logo">
        <img src="../assets/logo.png" alt="" style="display: block;" width="40">
        <div class="login-title">七月酒店登录系统</div>
        <div style="width: 1vh; height: 2vh;"></div>
      </div>
      <a-row type="flex" justify="center">
        <a-col :span="5" align="right">

        </a-col>
        <a-col :span="17">

        </a-col>
      </a-row>
      <!--第二行错误信息显示-->
      <a-row v-if="errMsgFlag" type="flex" justify="center">
        <a-col :span="20">
          <div class="err-msg">{{ errMsg }}</div>
        </a-col>
      </a-row>
      <!--登录表单-->
      <el-form ref="loginForm" :model="loginData" :rules="loginRules" status-icon>
        <a-row type="flex" justify="center">
          <a-col :span="20">
            <el-form-item prop="username">
              <el-input v-model="loginData.username" maxlength="32" show-word-limit placeholder="用户名|邮箱地址|手机号..."
                        size="large" prefix-icon="el-icon-user"/>
            </el-form-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center">
          <a-col :span="20">
            <el-form-item prop="password">
              <el-input v-model="loginData.password" maxlength="128" placeholder="请输入密码..." show-word-limit size="large"
                        prefix-icon="el-icon-lock" show-password/>
            </el-form-item>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center">
          <a-col :span="14">
            <el-form-item prop="captcha">
              <el-input v-model="loginData.captcha" maxlength="6" placeholder="请输入验证码..." show-word-limit size="large"
                        prefix-icon="el-icon-bell"/>
            </el-form-item>
          </a-col>
          <a-col :span="6" align="right">
            <el-tooltip placement="top" content="看不清，请点击刷新！">
              <img :src="captchaUrl" alt="验证码" style="border-radius: 0.3vh" @click="getCaptchaUrl" @load="showRemainTime">
            </el-tooltip>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center">
          <a-col :span="10" style="margin-top: -0.8vh">
            <el-form-item prop="rememberme">
              <el-checkbox v-model="loginData.rememberme">RememberMe</el-checkbox>
            </el-form-item>
          </a-col>
          <a-col :span="10" align="right">
            <span style="color: rgba(255, 0, 0, 0.8)">{{ captchaRemainTime }}</span>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center">
          <a-col :span="20" align="center">
            <el-button type="primary" style="width: 60%" @click="submitLoginData">确定</el-button>
          </a-col>
        </a-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import Qs from 'qs'
import {Checkbox} from "element-ui"

export default {
  name: "LoginView",
  components: {
    "el-checkbox": Checkbox
  },
  data() {
    return {
      errMsgFlag: false,
      errMsg: "",
      loginData: {
        username: "",
        password: "",
        captcha: "",
        captchaKey: "",
        rememberme: "",
      },
      loginRules: {
        username: [
          {required: true, message: "用户名不能为空，请输入！", trigger: "blur"}
        ],
        password: [
          {required: true, message: "密码不能为空，请输入！", trigger: "blur"}
        ],
        captcha: [
          {required: true, message: "验证码不能为空，请输入！", trigger: "blur"}
        ]
      },
      captchaUrl: "",
      captchaRemainTime: "验证码以过期请刷新！",
      timeStart: 180,
      timeCounts: 0
    }
  },
  async created() {
    this.getCaptchaUrl();
    //解构表达式：作用从复杂的js对象或js数组中获取指定的属性或元素
    //当我们指定的变量名与属性名相同时 ”：变量名“可以省略
    // const {data:res} = await this.$http.get("/test");
    // console.log(res);
  },
  methods: {
    getCaptchaUrl() {
      for (let i = 0;i <= this.timerCounts;i++){
        clearInterval(i);
      }
      this.timeStart=180;
      let captchaKey = Math.floor(Math.random() * 10000)
      console.log(captchaKey)
      this.captchaUrl = `http://localhost:9010/sys/captcha?captchaKey=${captchaKey}`;
      this.loginData.captchaKey = captchaKey;
    },
    showRemainTime(){
      /*js的定时器，每过指定的时间会自动调用该函数内部的一个回调函数，回调函数由程序员定义
      * 参数1 回调函数
      * 参数2 指定的时间间隔 以毫秒为单位
      * 返回值是这个定时器的序列号*/
      this.timerCounts=setInterval(()=>{
        //把初始时间-1
        this.timeStart--;
        //判断该初始时间是否为0
        if (0===this.timeStart){
          /*提醒用户验证码已过期，点击刷新验证码
          终止定时器
          */
          this.captchaRemainTime="验证码以过期请刷新！";
          clearInterval(this.timerCounts);
        }else {
          this.captchaRemainTime=`当前验证码还剩${this.timeStart}秒过期`
        }
      },1000)
    },
    //确认按钮点击事件处理函数
    submitLoginData(){
      this.$refs.loginForm.validate(async value => {
        console.log(value)
        if (!value) {
          this.$notify.error({message: "登录", description: "您的登录信息无效，请重新输入"})
          return;
        }
        console.log(this.loginData)
        //springsecurity:要求，认证请求的请求方式是post，请求参数的格式：key1=value1&key2=value2...urlencoded格式。
        // 默认整合ajax是axios，post请求默认参数格式是json串，需要转换格式
        //url默认/login--->/sys/login,但是发起请求时完整的url：baseurl+请求url http://localhost:9010/sys/login
        const {data} = await this.$http.post("/login", Qs.stringify(this.loginData));
        /*TODO:*/
        if (data.resCode===2000){
          sessionStorage.setItem("tokenMap",JSON.stringify(data.resData))
          this.$notify.success({
            message:"用户登录",description: data.resMsg
          })
          await this.$router.push("/home");
        }else {
          this.errMsgFlag=true;
          this.errMsg= data.resMsg;
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/login.webp");
  background-size: contain;
  position: relative;
}

.login-box {
  width: 20vw;
  min-height: 42vh;
  background-color: rgba(51, 102, 255, 0.3);
  position: absolute;
  top: 25vh;
  right: 25vw;
  border-radius: 1vh;
  box-shadow: 0 0 1vh 0.2vh rgba(51, 102, 255, 0.3);
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-top: -2.5vh;

}

.login-title {
  user-select: none;
  height: 5vh;
  line-height: 5vh;
  color: #CCCC00;
  font-size: 2.6vh;
  font-family: "宋体", serif;
  font-weight: bolder;
  text-shadow: 0 0 1vh 1vh #CCCC00;
}

.err-msg {
  width: 100%;
  height: 4vh;
  line-height: 4vh;
  background-color: rgba(255, 0, 0, 0.6);
  border-radius: 0.5vh;
}

.ant-row-flex {
  margin-top: 2vh;
}
</style>